<template>
    <div class="w-full h-full box-border flex flex-col overflow-y-hidden">
        <header class="flex-none block">
            <div class="h-[68px] text-base text-third cursor-pointer touchable-opacity flex flex-row items-center gap-[6px]">
                <GpFontIcon name="icon-jiantou_zuo" class="text-2xl !leading-6" @click="$router.back()" />
                <span @click="$router.back()">返回上一级</span>
            </div>
        </header>
        <main class="flex-1 overflow-y-auto no-scrollbar">
            <div class="bg-white pt-[56px] min-h-full rounded-xl">
                <div class="mx-auto w-[776px]">
                    <section class="flex flex-col items-center">
                        <h3 class="text-[28px] leading-9 font-bold text-primary">发布AI智聘职位</h3>
                        <p class="text-base text-secondary text-nowrap mt-[10px]">配置AI筛选条件及沟通策略，实现自动化人才挖掘</p>
                        <a-space class="mt-10" :size="24" align="center">
                            <div class="flex flex-col justify-center items-center gap-[10px] fuck-progress" :class="step === item.value ? 'current' : ''" v-for="item in stepOptions" :key="item.value">
                                <div class="size-12 rounded-full border border-solid border-[var(--ring-color)] flex flex-row justify-center items-center">
                                    <div class="font-bold text-white text-2xl size-[34px] rounded-full bg-[var(--ring-color)] flex justify-center items-center">{{ item.value }}</div>
                                </div>
                                <label class="text-sm text-[var(--label-color)] font-[var(--label-weight)]">{{item.label}}</label>
                            </div>
                            <template #split>
                                <div class="w-40 h-px border-t border-dashed border-t-[#ACAEB2]" style="margin-block-start: -14px;"></div>
                            </template>
                        </a-space>
                    </section>
                    <section class="mt-[56px] pb-[64px]">
                        <div v-if="step === 1">
                            <a-flex justify="space-between" :gap="56" class="mb-6">
                                <a-flex :gap="8" vertical :flex="1">
                                    <div class="text-sm text-primary">
                                        <span class="text-[#F53F3F] pr-1">*</span>
                                        职位名称
                                    </div>
                                    <GpEditableSearchSelect
                                        placeholder="请输入职位名称" 
                                        size="large"
                                        style="width: 100%;"
                                        v-model:value="formState.position"
                                        :get-options="getPositionOptions"
                                        @select="handlePositionChange"
                                    />
                                </a-flex>
                                <a-flex :gap="8" vertical :flex="1">
                                    <div class="text-sm text-primary">
                                        <span class="text-[#F53F3F] pr-1">*</span>
                                        招聘类型
                                    </div>
                                    <a-select placeholder="请选择招聘类型" size="large" style="width: 100%;" :options="jobTypeOptions" v-model:value="formState.workMode" @change="handleWorkModeChange" />
                                </a-flex>
                            </a-flex>
                            <a-flex justify="space-between" :gap="56">
                                <a-flex :gap="8" vertical :flex="1">
                                    <div class="text-sm text-primary">
                                        <span class="text-[#F53F3F] pr-1">*</span>
                                        职位类别
                                    </div>
                                    <a-cascader placeholder="请选择职位类别" size="large" style="width: 100%;" :options="cascadeJobTypes.options" v-model:value="formState.jobType" />
                                </a-flex>
                                <a-flex :gap="8" vertical :flex="1">
                                    <div class="text-sm text-primary">
                                        <span class="text-[#F53F3F] pr-1">*</span>
                                        薪资范围
                                    </div>
                                    <a-flex justify="space-between" align="center">
                                        <a-select placeholder="最小值" size="large" style="width: 106px;" :options="salaryOptions.min" v-model:value="formState.salaryMin" />
                                        <span>~</span>
                                        <a-select placeholder="最大值" size="large" style="width: 106px;" :options="salaryOptions.max" v-model:value="formState.salaryMax" />
                                        <span>x</span>
                                        <a-select placeholder="请选择" size="large" style="width: 106px;" :options="salaryUnitOptions" v-model:value="formState.salaryUnit" />
                                    </a-flex>
                                    <p class="text-theme">
                                        <GpFontIcon name="icon-zhuyi" class="pr-2" />
                                        1K=1千元，10K=1万元
                                    </p>
                                </a-flex>
                            </a-flex>
                            <a-flex justify="space-between" :gap="56" class="mb-6">
                                <a-flex :gap="8" vertical :flex="1">
                                    <div class="text-sm text-primary">
                                        <span class="text-[#F53F3F] pr-1">*</span>
                                        所属部门
                                    </div>
                                    <a-select placeholder="请选择所属部门" size="large" style="width: 100%;" :options="departmentOptions" v-model:value="formState.departmentId" />
                                </a-flex>
                                <a-flex :gap="8" vertical :flex="1">
                                    <div class="text-sm text-primary">
                                        <span class="text-[#F53F3F] pr-1">*</span>
                                        招聘HR
                                    </div>
                                    <a-select placeholder="请选择招聘HR" size="large" style="width: 100%;" :options="publishUserOptions" v-model:value="formState.publishUserId" :loading="publishUserLoading" />
                                </a-flex>
                            </a-flex>
                            <a-flex :gap="8" vertical :flex="1" class="mb-6">
                                <div class="text-sm text-primary">
                                    <span class="text-[#F53F3F] pr-1">*</span>
                                    工作地点
                                </div>
                                <a-input :value="inputAddress" placeholder="请选择工作地点" size="large" style="width: 100%;" readonly @click="triggerWorkAddress()" />
                            </a-flex>
                            <a-flex :gap="8" vertical :flex="1">
                                <div class="text-sm text-primary">
                                    <span class="text-[#F53F3F] pr-1">*</span>
                                    职位描述
                                </div>
                                <a-textarea placeholder="请输入职位描述" style="width: 100%;" :rows="8" v-model:value="formState.description" />
                            </a-flex>
                            <a-flex justify="center" :gap="32" class="mt-[56px]">
                                <a-button class="!px-10" size="large" @click="handleCancelStepOne()">取消发布</a-button>
                                <a-button class="!px-10" type="primary" size="large" :loading="loadingStepOne" @click="handleConfirmStepOne()">保存下一步</a-button>
                            </a-flex>
                        </div>
                        <div v-else-if="step === 2">
                            <div class="pb-4">
                                <a-flex align="center" :gap="8" class="mb-6">
                                    <div class="w-1 h-4 bg-theme rounded-xs"></div>
                                    <span class="text-base font-bold text-primary">硬性条件要求</span>
                                </a-flex>
                                <a-flex justify="space-between" :gap="56" class="mb-6">
                                    <a-flex :gap="8" vertical :flex="1">
                                        <div class="text-sm text-primary">
                                            <span class="text-[#F53F3F] pr-1">*</span>
                                            年龄要求
                                        </div>
                                        <a-flex align="center" :gap="8">
                                            <a-select style="width: 100%;" class="flex-1" 
                                                v-model:value="formStateStepTwo.ageMin"
                                                show-search
                                                allow-clear
                                                placeholder="最小值" 
                                                size="large"
                                                :options="minAgeSelectOptions" 
                                                :filter-option="filterOption"
                                                @change="handleAgeRangeChange"
                                            />
                                            <span class="text-sm text-primary">~</span>
                                            <a-select style="width: 100%;" class="flex-1"
                                                v-model:value="formStateStepTwo.ageMax"
                                                show-search
                                                allow-clear
                                                placeholder="最大值" 
                                                size="large"
                                                :options="maxAgeSelectOptions"
                                                :filter-option="filterOption"
                                                @change="handleAgeRangeChange"
                                            />
                                        </a-flex>
                                    </a-flex>
                                    <a-flex :gap="8" vertical :flex="1">
                                        <div class="text-sm text-primary">
                                            <span class="text-[#F53F3F] pr-1">*</span>
                                            工作经验
                                        </div>
                                        <a-select placeholder="请选择工作经验" size="large" style="width: 100%;" v-model:value="formStateStepTwo.exp" :options="expOptions" />
                                    </a-flex>
                                </a-flex>
                                <a-flex justify="space-between" :gap="56" class="mb-6">
                                    <a-flex :gap="8" vertical :flex="1">
                                        <div class="text-sm text-primary">
                                            <span class="text-[#F53F3F] pr-1">*</span>
                                            学历要求
                                        </div>
                                        <a-select placeholder="请选择学历" size="large" style="width: 100%;" v-model:value="formStateStepTwo.education" :options="eduOptions" />
                                    </a-flex>
                                    <a-flex :gap="8" vertical :flex="1">
                                        <div class="text-sm text-primary">
                                            <span class="text-[#F53F3F] pr-1">*</span>
                                            毕业院校
                                        </div>
                                        <a-select placeholder="请选择毕业院校" size="large" style="width: 100%;" v-model:value="formStateStepTwo.schoolTags" :options="schoolTagOptions" mode="multiple" @select="handleSchoolTagsSelect" @deselect="handleSchoolTagsDeSelect" />
                                    </a-flex>
                                </a-flex>
                            </div>
                            <div>
                                <a-flex align="center" :gap="8" class="mb-6">
                                    <div class="w-1 h-4 bg-theme rounded-xs"></div>
                                    <span class="text-base font-bold text-primary">专业能力要求</span>
                                </a-flex>
                                <a-flex :gap="8" vertical class="mb-6">
                                    <div class="text-sm text-primary">
                                        <span class="text-[#F53F3F] pr-1">*</span>
                                        经历要求
                                    </div>
                                    <GpSearchableSelect placeholder="请选择经历要求" size="large"
                                        v-model:value="formStateStepTwo.experienceTagIds"
                                        style="width: 100%;"
                                        :get-options="getExpTagOptions"
                                    />
                                </a-flex>
                                <a-flex :gap="8" vertical class="mb-6">
                                    <div class="text-sm text-primary">
                                        <span class="text-[#F53F3F] pr-1">*</span>
                                        技能要求
                                    </div>
                                    <GpSearchableSelect placeholder="请选择技能要求" size="large"
                                        v-model:value="formStateStepTwo.skillTagIds"
                                        style="width: 100%;"
                                        :get-options="getSkillTagOptions"
                                    />
                                </a-flex>
                            </div>
                            <a-flex justify="center" :gap="32" class="mt-[56px]">
                                <a-button class="!px-10" size="large" @click="prevStep()">返回上一步</a-button>
                                <a-button class="!px-10" type="primary" size="large" :loading="submitingStepTwo" @click="saveStepTwo()">保存下一步</a-button>
                            </a-flex>
                        </div>
                        <div v-else-if="step === 3">
                            <div class="pb-4">
                                <a-flex align="center" :gap="8" class="mb-6">
                                    <div class="w-1 h-4 bg-theme rounded-xs"></div>
                                    <span class="text-base font-bold text-primary">打招呼</span>
                                </a-flex>
                                <a-flex :gap="8" vertical class="mb-6">
                                    <div class="text-sm text-primary">
                                        打招呼时段
                                    </div>
                                    <a-select placeholder="请选择打招呼时段" size="large" style="width: 100%;" v-model:value="formStateStepThree.chatType" :options="chatTypeOptions" />
                                </a-flex>
                                <a-flex :gap="8" vertical class="mb-6">
                                    <div class="text-sm text-primary">
                                        打招呼话术
                                    </div>
                                    <a-textarea placeholder="请输入打招呼话术" :rows="5" style="width: 100%;" v-model:value="formStateStepThree.chatContent" />
                                </a-flex>
                                <a-flex :gap="8" vertical class="mb-6">
                                    <div class="text-sm text-primary">
                                        欢迎语配置
                                    </div>
                                    <a-textarea placeholder="如何回复求职者打招呼" :rows="5" style="width: 100%;" v-model:value="formStateStepThree.welcomeContent" />
                                </a-flex>
                            </div>
                            <div class="pb-4">
                                <a-flex align="center" :gap="8" class="mb-6">
                                    <div class="w-1 h-4 bg-theme rounded-xs"></div>
                                    <span class="text-base font-bold text-primary">知识库回复配置</span>
                                </a-flex>
                                <a-flex :gap="8" vertical class="mb-6">
                                    <div class="text-sm text-primary">
                                        当求职者询问问题时，使用以下知识库结合回答：
                                    </div>
                                    <a-select placeholder="请选择知识库" size="large" style="width: 100%;" v-model:value="formStateStepThree.knowledgeId" :options="knowledgeOptions" :loading="knowledgeOptionsLoading" />
                                </a-flex>
                                <a-flex :gap="8" vertical class="mb-6">
                                    <div class="text-sm text-primary">
                                        当知识库不满足回复条件时，采取以下动作：
                                    </div>
                                    <a-radio-group size="large" style="width: 100%;" v-model:value="formStateStepThree.unmetAction" :options="unmetActionOptions" />
                                    <a-textarea v-show="showUnmetReply" placeholder="请输入回复话术" :rows="5" style="width: 100%;" v-model:value="formStateStepThree.unmetReply" />
                                </a-flex>
                            </div>
                            <div class="pb-4">
                                <a-flex align="center" :gap="8" class="mb-6">
                                    <div class="w-1 h-4 bg-theme rounded-xs"></div>
                                    <span class="text-base font-bold text-primary">简历匹配配置</span>
                                </a-flex>
                                <a-flex :gap="8" vertical class="mb-6">
                                    <div class="text-sm text-primary">
                                        硬件条件要求
                                    </div>
                                    <a-select placeholder="请选择硬件条件要求" size="large" style="width: 100%;" v-model:value="formStateStepThree.coditionMatchType" :options="coditionMatchTypeOptions" />
                                </a-flex>
                                <a-flex :gap="8" vertical class="mb-6">
                                    <div class="text-sm text-primary">
                                        专业技能要求
                                    </div>
                                    <a-select placeholder="请选择专业技能要求" size="large" style="width: 100%;" v-model:value="formStateStepThree.majorMatchType" :options="majorMatchTypeOptions" />
                                </a-flex>
                                <a-flex :gap="8" vertical class="mb-6">
                                    <div class="text-sm text-primary">
                                        意向匹配要求
                                    </div>
                                    <a-select placeholder="请选择意向匹配要求" size="large" style="width: 100%;" v-model:value="formStateStepThree.intentionMatchType" :options="intentionMatchTypeOptions" />
                                </a-flex>
                            </div>
                            <div class="pb-4">
                                <a-flex align="center" :gap="8" class="mb-6">
                                    <div class="w-1 h-4 bg-theme rounded-xs"></div>
                                    <span class="text-base font-bold text-primary">匹配动作设置</span>
                                </a-flex>
                                <a-flex :gap="8" vertical class="mb-6">
                                    <a-checkbox-group size="large" style="width: 100%;" v-model:value="formStateStepThree.successfulOperation" :options="successfulOperationOptions" />
                                </a-flex>
                            </div>
                            <div class="pb-4">
                                <a-flex align="center" :gap="8" class="mb-6">
                                    <div class="w-1 h-4 bg-theme rounded-xs"></div>
                                    <span class="text-base font-bold text-primary">不匹配动作配置</span>
                                </a-flex>
                                <a-flex :gap="8" vertical class="mb-6">
                                    <a-checkbox-group size="large" style="width: 100%;" v-model:value="formStateStepThree.failedOperation" :options="failedOperationOptions" />
                                    <a-textarea v-show="showFailedReply" placeholder="请输入婉拒话术" :rows="5" style="width: 100%;" v-model:value="formStateStepThree.failedReply" />
                                </a-flex>
                            </div>
                            <a-flex justify="center" :gap="32" class="mt-[56px]">
                                <a-button class="!px-10" size="large" @click="prevStep()">返回上一步</a-button>
                                <a-button class="!px-10" type="primary" size="large" :loading="submitingStepThree" @click="saveStepThree()">保存发布</a-button>
                            </a-flex>
                        </div>
                    </section>
                </div>
            </div>
        </main>
        <WorkAdressModal ref="workAddressRef" @select="receiveWorkAddress" />
    </div>
</template>
<script lang="ts" setup>
import { jobTypeOptions } from '@/constants/enum-options'
import { useStepOne } from './composables/useStepOne'
import { useStepTwo } from './composables/useStepTwo'
import { useStepThree } from './composables/useStepThree'
import router from '@/router'
import { getJobGetjobdetailId } from '@/api/siderBar/job'
import type { RouteParams } from './types'
import { useAppStore } from '@/stores'

defineOptions({
    name: 'JobPublishPage'
})
definePage({
    name: 'JobPublishPage',
    meta: {
        title: '发布AI智聘职位',
        isLayout: false,
        navMatchedName: "JobPositionPage"
    }
})
const route = useRoute()
const query = ref<RouteParams>({...<RouteParams>route.query})
const appStore = useAppStore()
const { loading, refreshAsync } = useRequest(() => getJobGetjobdetailId(Number(query.value.id)), {
    manual: !isSetValue(query.value.id),
    onSuccess(detail) {
        populateDetailStepOne(detail)
        populateDetailStepTwo(detail)
        populateDetailStepThree(detail)
    }
})
useEffectScope(() => {
    watch(loading, () => {
        appStore.toggleLoading(toValue(loading))
    })
})
const stepOptions: IOption<number>[] = [
    { value: 1, label: '基础信息' },
    { value: 2, label: '招聘需求' },
    { value: 3, label: 'AI配置' }
]
const step = ref<number>(stepOptions[query.value.id ? 2 : 0].value)
function prevStep() {
    step.value--
}
const { 
    formState,
    inputAddress,
    cascadeJobTypes,
    salaryOptions,
    salaryUnitOptions,
    departmentOptions,
    publishUserOptions,
    publishUserLoading,
    loadingStepOne,
    workAddressRef,
    triggerWorkAddress,
    receiveWorkAddress,
    getPositionOptions,
    handlePositionChange,
    handleWorkModeChange,
    handleCancelStepOne,
    handleConfirmStepOne,
    populateDetail: populateDetailStepOne
} = useStepOne({
    query,
    next() {
        refreshAsync()
        step.value++;
    }
})
const {
    filterOption,
    submiting: submitingStepTwo,
    formState: formStateStepTwo,
    minAgeSelectOptions,
    maxAgeSelectOptions,
    eduOptions,
    expOptions,
    schoolTagOptions,
    handleSchoolTagsSelect,
    handleSchoolTagsDeSelect,
    populateDetail: populateDetailStepTwo,
    handleAgeRangeChange,
    save: saveStepTwo,
    getSkillTagOptions,
    getExpTagOptions
} = useStepTwo({
    query,
    next() {
        step.value++;
    }
})
const {
    chatTypeOptions,
    unmetActionOptions,
    coditionMatchTypeOptions,
    majorMatchTypeOptions,
    intentionMatchTypeOptions,
    successfulOperationOptions,
    failedOperationOptions,
    formState: formStateStepThree,
    showFailedReply,
    showUnmetReply,
    submitting: submitingStepThree,
    save: saveStepThree,
    populateDetail: populateDetailStepThree,
    knowledgeOptions,
    knowledgeOptionsLoading
} = useStepThree({
    query,
    next() {
        router.push({ name: 'JobPositionPage' })
    }
})
</script>
<style lang="less" scoped>
.fuck-progress {
    --ring-color: #CED4DB;
    --label-color: #ACAEB2;
    --label-weight: 400;
    &.current {
        --ring-color: var(--color-theme);
        --label-color: var(--color-theme);
        --label-weight: 700;
    }
}
</style>